<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Handling user-uploaded images by Derya</title>
  <link href="https://fonts.googleapis.com/css2?family=Coming+Soon&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="filter">
  <p>Flip your mood</p>
  <div class="weather">
    <img src="https://i.pinimg.com/originals/19/8d/ae/198daeda14097d45e417e62ff283f10e.png" class="cloud" alt="cloud">
    <img src="http://pngimg.com/uploads/lightning/lightning_PNG39.png" class="thunder" alt="thunder">
  </div>

  <div class="container">

    <div class="wrapper">
      <div class="image one">
        <div class="image__side image__side--front">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/3.png" alt="Pug">
        </div>
        <div class="image__side image__side--back">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/1.png" alt="Avatar for user 1">
          <span class="text">Happy &#128516<span />
        </div>
      </div>
    </div>

    <div class="wrapper">
      <div class="image">
        <div class="image__side image__side--front">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/3.png" alt="Pug">
        </div>
        <div class="image__side image__side--back">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/2.jpg" alt="Pug">
          <span class="text">Grumpy 😒<span />
        </div>
      </div>
    </div>

    <div class="wrapper">
      <div class="image">
        <div class="image__side image__side--front">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/3.png" alt="Pug">
        </div>
        <div class="image__side image__side--back">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/5.png" alt="Pug">
          <span class="text">Warrior 🔥<span />
        </div>
      </div>
    </div>

    <div class="wrapper">
      <div class="image">
        <div class="image__side image__side--front">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/3.png" alt="Pug">
        </div>
        <div class="image__side image__side--back">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/6.png" alt="Pug">
          <span class="text">Annoyed 😈<span />
        </div>
      </div>
    </div>

    <div class="wrapper">
      <div class="image">
        <div class="image__side image__side--front">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/3.png" alt="Pug">
        </div>
        <div class="image__side image__side--back">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/7.jpg" alt="Pug">
          <span class="text">Optimistic 🤞<span />
        </div>
      </div>
    </div>

    <div class="wrapper">
      <div class="image">
        <div class="image__side image__side--front">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/3.png" alt="Pug">
        </div>
        <div class="image__side image__side--back">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/8.png" alt="Pug">
          <span class="text">Loving 💓<span />
        </div>
      </div>
    </div>

    <div class="wrapper">
      <div class="image">
        <div class="image__side image__side--front">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/3.png" alt="Pug">
        </div>
        <div class="image__side image__side--back">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/9.png" alt="Pug">
          <span class="text">Joyful 😸<span />
        </div>
      </div>
    </div>

    <div class="wrapper">
      <div class="image">
        <div class="image__side image__side--front">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/3.png" alt="Pug">
        </div>
        <div class="image__side image__side--back">
          <img src="https://codepen-chriscoyier-bucket.imgix.net/10.svg" alt="Pug">
          <span class="text">Safe 🦠<span />
        </div>
      </div>
    </div>

  </div>

  <div class="waves">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#64c3eb" fill-opacity="0.7" d="M0,32L13.3,53.3C26.7,75,53,117,80,138.7C106.7,160,133,160,160,165.3C186.7,171,213,181,240,197.3C266.7,213,293,235,320,245.3C346.7,256,373,256,400,266.7C426.7,277,453,299,480,298.7C506.7,299,533,277,560,240C586.7,203,613,149,640,154.7C666.7,160,693,224,720,218.7C746.7,213,773,139,800,101.3C826.7,64,853,64,880,64C906.7,64,933,64,960,101.3C986.7,139,1013,213,1040,208C1066.7,203,1093,117,1120,101.3C1146.7,85,1173,139,1200,138.7C1226.7,139,1253,85,1280,85.3C1306.7,85,1333,139,1360,165.3C1386.7,192,1413,192,1427,192L1440,192L1440,320L1426.7,320C1413.3,320,1387,320,1360,320C1333.3,320,1307,320,1280,320C1253.3,320,1227,320,1200,320C1173.3,320,1147,320,1120,320C1093.3,320,1067,320,1040,320C1013.3,320,987,320,960,320C933.3,320,907,320,880,320C853.3,320,827,320,800,320C773.3,320,747,320,720,320C693.3,320,667,320,640,320C613.3,320,587,320,560,320C533.3,320,507,320,480,320C453.3,320,427,320,400,320C373.3,320,347,320,320,320C293.3,320,267,320,240,320C213.3,320,187,320,160,320C133.3,320,107,320,80,320C53.3,320,27,320,80,320L0,320Z">
      </path>
    </svg>
  </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>
